import OSSImageUpload from "@/components/OSSImageUpload";
import { useEditProductInfo, useProductInfo } from "@/services/product";
import type { IProduct } from "@/utils/types";
import {
  Button,
  Col,
  Divider,
  Drawer,
  Form,
  Input,
  InputNumber,
  Row,
  Space,
  Spin,
} from "antd";
import TextArea from "antd/es/input/TextArea";
import { useState } from "react";

// import style from './index.module.less';

interface IProps {
  id?: string;
  onClose: () => void;
}

/**
 * 创建/编辑课程
 */
const EditProduct = ({ onClose, id = "" }: IProps) => {
  const [form] = Form.useForm();
  const [edit, editLoading] = useEditProductInfo();
  // const { getProduct, loading } = useProduct();
  const { data, loading } = useProductInfo(id);
  const [open, setOpen] = useState(true);

  // 这里会打印两次
  console.log("useProductInfo", data);

  const onSubmitHandler = async () => {
    const values = await form.validateFields();
    if (values) {
      // console.log("values", values);
      const formData = {
        ...values,
        coverUrl: values?.coverUrl[0].url,
        bannerUrl: values?.bannerUrl[0].url,
      } as IProduct;
      // console.log("formData", formData);
      edit(id, formData, onClose);
    }
  };
  return (
    <Drawer
      title={id ? "编辑商品" : "新建商品"}
      width={720}
      // 由于关闭时直接销毁，没有动画，这里进行改动
      open={open}
      onClose={() => setOpen(false)}
      afterOpenChange={(o) => !o && onClose}
      extra={
        <Space>
          <Button onClick={() => onClose()}>取消</Button>
          <Button
            loading={editLoading}
            onClick={() => onSubmitHandler()}
            type="primary"
          >
            提交
          </Button>
        </Space>
      }
    >
      <Spin spinning={loading}>
        {/* 注意，这里之所以要这样写是因为initialValues不是异步的，而是在Form初始化时就要传入 */}
        {(data || !id) && (
          <Form form={form} initialValues={data}>
            <Row gutter={20}>
              <Col span={18}>
                <Form.Item
                  style={{ width: "100%" }}
                  label="名称"
                  name="name"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="库存总量"
                  name="stock"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <InputNumber />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={20}>
              <Col span={8}>
                <Form.Item
                  label="原价"
                  name="orginalPrice"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <InputNumber />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label="优惠价"
                  name="preferentialPrice"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <InputNumber />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label="每人限购数量"
                  name="limitBuyNumber"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <InputNumber />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item
              label="商品简介"
              name="desc"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <TextArea rows={5} showCount maxLength={200} allowClear />
            </Form.Item>
            <Divider>图片设置</Divider>
            <Row gutter={20}>
              <Col span={12}>
                <Form.Item
                  label="商品封面图: 图片要求长宽比16:9"
                  name="coverUrl"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  labelCol={{
                    span: 24,
                  }}
                >
                  <OSSImageUpload maxCount={1} imgCropAspect={16 / 9} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="商品Banner图: 图片要求长宽比16:9"
                  name="bannerUrl"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                  labelCol={{
                    span: 24,
                  }}
                >
                  <OSSImageUpload maxCount={1} imgCropAspect={16 / 9} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        )}
      </Spin>
    </Drawer>
  );
};

export default EditProduct;
